<!-- 【示例4-13】实现书籍分类组件与书籍列表组件的通信
components/CategoryCom. vue : -->
<template>
    <div>
        <b>书籍类别</b>
        <ul>
            <li v-for="cate in categories" :key="cate.id">
                <a href=" " @click.prevent=" clickHandler(cate.id)">{{
                    cate.name
                    }}
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {

}
data(){
    return {
        categories: [
            {
                id: 1;
                name: "文学类";
            },
            {
                id: 2;
                name: "经济类";
            },
            {
                id: 3;
                name: "艺术类";
            }

        ]
    };
},
methods: {
    //向父组件派发自定义事件category,并将cid 作为参数传递
    this.$emit(" category", cid);
};

</script>
<style></style>
components/ListCo.vue:
<template>
<div>
<b>书籍列表</b>
<ul class = " myu!" >
    <li v-for="( book,index ) in books" : key = " book, id" >
序号:{{index+1}},书籍名称:{{book.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
//定义books属性接收父组件的值
props: [ " books" ]
}
</script>
<style>
.myul {
    padding: 0;
    margin;
    0;
    text-align;
    left;
    list-style-type: none;
}
</style>
<!-- 上述代码实现了 ListCom 组件，使用 props 选项定义 books 接收来自父组件的板中使用v-for 指令将书籍名称渲染为列表。
App. vue : -->
<template>
    <div class=" container">
        <div class=" left">
            <!--书籍分类组件-->
            <CategoryCom @category="categoryHandler" />
        </div>
        <div class=" right">
            <!--书籍列表组件-->
            <ListCom:books=" list" />
        </div>
    </div>
</template>
<script>
import CategonyCom fhnom "./componentv/CaegoryCom. vue"
import listCom fom "./eomponentyListCom.vue"
export default {
    data(){
        return{
            books:[
{
    id: " bO0l"
cid: 1,
name:"《鲁迅全集》",
},
{
    id:"b002"
cid: 1,
name:"《埃及神话》"，
},
{
    id: "b003",
cid: 2,
name:"《经济学的诡计》"
},
{
    id:"b004"
cid: 3,
name:"《大话中国艺术史》",
},{
    id:"b005"
cid: 3.
name:"《敦煌艺术通识课》",
},
}
list;[]
};
},
mounted ( ){
    this. list =this. books. slice( ) ;
}

ommponents:{
    CategonyCom,
    listCom,
},
methods{

//根据分类选出对应分类的书籍
categoryHandler( cid ){
    this, list = this. books.iler( book=>book.cid= = =cid) ;
}
}
},
</script>
<style>
.container {
    overlow: hidden;
    width: 600px;
}

. container. left. .container. right {
    foat: left;
    margin-boom: -10000px;
    padding-botom: 10000px;
}

container.left {
    widih: 20%;
    background: rgb(237, 228, 229);
}

.container.right {
    align-content: left;
    width: 80%;
    background: rgb(205, 222, 245);
}
</style>